ShowTable of Contents
はじめに
XPages Social Enabler ではさまざまなソーシャルメディアやクラウドサービスをデータソースとして利用し、XPages アプリケーションの中で表示したり、メッセージやコンテンツを投稿するなどの連携を行うことができます。Social Enabler では Twitter と連携するための仕組みを提供しています。この記事では、XPages Social Enabler を使用するための構成の手順と、Twitter のデータを XPages アプリケーションで表示する簡単なアプリケーションを紹介します。
この記事の内容を実践するには、あらかじめ XPages Extension Library が導入された Domino 環境で、Social Enabler が利用できるように構成されている必要があります。Social Enabler の構成については [T.B.D.] の記事が参考になります。
Twitter を使用するための構成
[1] Twitter でのアプリケーションの登録
1.
https://dev.twitter.com/
を開く
2. 右上で sign in リンクをクリックしログイン
3. Create an app リンクをクリック
4. Create an application ページで適当に入力する。私の場合は以下のように入力
Name: KomineTest
Description: Hiro Komine's test application
Website:
http://nd853lab.lotus.com/
Callback URL:
http://nd853lab.lotus.com/
※ ここで指定するアプリケーション名（この例では「KomineTest」）は、あとで WebSecurityStore.nsf に指定する Application Id と一致する必要はない。
5. どこだか忘れたけど Access level を設定
Access level: Read and write
6. 作成後 My applications リンクで内容を確認
以下のような OAuth の設定が表示されるので記録
Access level: Read and write
Consumer key: <アプリケーション毎に割り振られた文字列>
Consumer secret: <アプリケーション毎に割り振られた文字列>
Request token URL:
https://api.twitter.com/oauth/request_token
Authorize URL:
https://api.twitter.com/oauth/authorize
Access token URL:
https://api.twitter.com/oauth/access_token
[2] WebSecurityStore.nsf に登録
1. http://<server>/websecuritystore.nsf/KeysApplications.xsp を開く
2. Add Token リンクで以下を設定
Application Id: XPagesSBT
Service Name: Twitter
Consumer Key: <アプリケーション毎に割り振られた文字列>
Consumer Key Type: HMAC-SHA1
Consumer Secret: <アプリケーション毎に割り振られた文字列>
Request Token Uri:
https://api.twitter.com/oauth/request_token
Authorization Uri:
https://api.twitter.com/oauth/authorize
Access Token Uri:
https://api.twitter.com/oauth/access_token
3. 保存後、http://<server>/xpagessbt.nsf を開き、Twitter タブを選択
4. Social Enabler によって Twitterとの OAuth の認可のプロセスが行われる。Twitter のログイン画面が表示され、その後、アプリケーションから Twitter へのアクセスを許可する画面が表示される。
Twitter と連携するシンプルなアプリケーション
faces-config.xml の設定
XPages Social Enabler で Twitter と連携させるためには、Twitter をデータソースとして使用するための設定を、NSF ファイル内の faces-config.xsl に記載する必要がある。faces-config.xsl ファイルは Domino Designer のアプリケーションナビゲーターで表示されないので、パッケージエクスプローラーなどを開いて表示する。
Social Enablerのサンプル NSF の記載が参考になるが、Twitter を動かすためだけの最低限の設定は以下になる。
<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
<!--
Token store physical implementation This store uses an NSF database to store both the access and the consumer tokens.
-->
<managed-bean>
<managed-bean-name>NSFStore</managed-bean-name>
<managed-bean-class>com.ibm.xsp.extlib.sbt.security.oauth_10a.store.OAuthNSFTokenStore
</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
<managed-property>
<property-name>database</property-name>
<value>WebSecurityStore.nsf</value>
</managed-property>
</managed-bean>
<!--
Twitter
-->
<managed-bean>
<managed-bean-name>twitter</managed-bean-name>
<managed-bean-class>com.ibm.xsp.extlib.sbt.services.client.endpoints.TwitterEndpoint
</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
<!-- Endpoint URL -->
<managed-property>
<property-name>url</property-name>
<value>https://api.twitter.com</value>
</managed-property>
<managed-property>
<property-name>serviceName</property-name>
<value>Twitter</value>
</managed-property>
<managed-property>
<property-name>appId</property-name>
<value>XPagesSBT</value>
</managed-property>
<!-- OAuth parameters -->
<managed-property>
<property-name>tokenStore</property-name>
<value>NSFStore</value>
</managed-property>
</managed-bean>
</faces-config>
Data View コントロールによる Twitter の表示
注意: オリジナルのアプリケーションにこの機能を実装する場合には、アプリケーションのプロパティの詳細タブにある「XPages ライブラリ」の「com.ibm.xsp.extlibx.library」を追加選択します。
Twitter のデータを表示するためには、Data View コントロールを使用する。
Data View コントロールの作成時に表示されるダイアログでは、データソースとして Twitter を選択できないので、一旦 Data View コントロールを作成後に、「すべてのプロパティ」で設定を行う。
-
「データ」→「data」 プロパティ： xe:twitterData を選択する。
-
「データ」→「data」 タブの設定
-
「endPoint」プロパティ： twitter
-
「scope」プロパティ： view
-
「var」プロパティ： twitterData1
-
「データ」→「data」 →「基本」タブの設定
-
「feedType」プロパティ： 表示したい内容に応じて選択
|
|
説明 |
|
timeLine |
自分のタイムライン |
|
publicTimeLine |
パブリックなタイムライン |
|
mentions |
自分のつぶやき |
|
rtByMe |
自分がリツィートしたつぶやき |
|
rtToMe |
自分宛てにリツィートされたつぶやき |
|
rtOfMe |
リツィートされた自分のつぶやき |
サンプルコード
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.beforePageLoad><![CDATA[#{javascript:
if(!@Endpoint("twitter").isAuthenticated()) {
@Endpoint("twitter").authenticate(true);
}
}]]>
</xp:this.beforePageLoad>
<xe:dataView rows="8" expandedDetail="true" var="tweet">
<xp:this.data>
<xe:twitterData var="twitterData1" endpoint="twitter"
scope="view">
</xe:twitterData>
</xp:this.data>
<xp:this.facets>
<xe:pagerAddRows id="pagerAddRows1" xp:key="pagerBottom">
</xe:pagerAddRows>
<xp:panel xp:key="summary" id="panel1"
style="display:inline-block">
<xp:link id="link1"
style="text-decoration:none;font-weight:bold;"
text="#{tweet.author}">
</xp:link>
</xp:panel>
<xp:panel xp:key="detail" id="panel2">
<xp:text id="computedField2" escape="false"
contentType="twitterContent">
<xp:this.value>
<![CDATA[#{javascript:tweet.title}]]>
</xp:this.value>
</xp:text>
</xp:panel>
<xp:panel xp:key="aaa">
<xp:text escape="true" id="computedField1"></xp:text></xp:panel>
</xp:this.facets>
</xe:dataView>
</xp:view>